<template>
	<view class="flex-col page">
		<view class="top-bar">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<!-- <uni-nav-bar left-icon="left" :title="title" background-color="#fff" @clickLeft="$nav(2,'')"></uni-nav-bar> -->
			<u-navbar :title="title" bgColor="#f5f5f5" @leftClick="$nav(2)">
			</u-navbar>
		</view>
			

		<view class="container" :style="{paddingTop:statusBarHeight1+'px'}">
			
			 <!-- 左侧分类 -->
			<scroll-view class="category-left" scroll-y>
				<view 
					v-for="(category, index) in categories" 
					:key="category.category_id"
					class="category-item"
					:class="{ active: currentCategoryIndex === category.category_id }"
					@click="switchCategory(category.category_id)">
					{{ category.category_name }}
				</view>
			</scroll-view>
			
			 <!-- 右侧商品 -->
			<scroll-view class="category-right" 
				scroll-y 
				:refresher-enabled="isOpenRefresh"
				:refresher-triggered="triggered"
			    :refresher-threshold="100"
				@refresherpulling="onPulling" 
				@refresherrefresh="onRefresh" 
				@refresherabort="onAbort" 
				@refresherrestore="onRestore" 
				@scrolltolower="handleScroll">
				<view v-if="list.length > 0" class="flex-col">
					<view class="goods-list" v-for="goods in list" :key="goods.goods_id" @click="toPage(goods)">
						<view style="width: 30%;">
							<image :src="goods.img_url" class="card_img"></image>
						</view>
						<view class="med_right">
							<view class="goods-name">{{ goods.name }}</view>
							<text class="org-price"
								v-if="goods.old_price && goods.old_price > 0"><text>¥{{ goods.old_price }}</text></text>
							<view class="goods-price">¥{{ goods.sell_price }}</view>
						</view>
					</view>
					
					<u-loadmore margin-top="20" margin-bottom="20" :status="status" icon-type="flower"
						:load-text="loadText" />
				</view>
				
				<view v-else class="flex-col items-center" style="margin-top: 250rpx;">
					<image src="/static/data_empty.png" style="width: 250rpx;height: 250rpx;"></image>
					<text style="color: #c0c4cc;">暂无数据</text>
				</view>
			</scroll-view>
	
	</view>
		
		
	</view>
</template>

<script>
import throttle from '../../uni_modules/uview-ui/libs/function/throttle';

	export default {
		data() {
			return {
				triggered: false,
			    isOpenRefresh: true, // 是否开启下拉
				currentCategoryIndex: 0,
				categories: [],
				list:[],
				page:1,
				status: 'loadmore',
				loadText: {
					loadmore: '下拉加载更多...',
					loading: '加载中...',
					nomore: '没有更多数据了...'
				},
				scrollHeight: 0, // scroll-view的总高度
			    scrollTop: 0, // scroll-view的滚动距离
			    offsetHeight: 0, // scroll-view的可视区域高度
			    isLoading: false, // 是否正在加载中，防止重复加载
				pid:0,
				title:''
			};
		},
		onLoad(op) {
			this.pid = op.pid;
			this.title = op.title;
			this.getCategoryChild()
			setTimeout(() => {
			  this.goodsList();
			}, 500);
			
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight
			},
			statusBarHeight1(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			toPage(item){
				let that = this;
				throttle(function(){
					uni.navigateTo({
						url: '/pages/product/index?goods_id='+item.goods_id + '&goodsType=0'
					});
				},1000);
			},
			getCategoryChild(){
				this.$request({
					url : '?c=Goods&a=category',
					type:'post',
					data:{
						category_pid:this.pid
					}
				}).then(res =>{
					// console.log(res)
					if(res.data != null && res.data.length != 0){
						this.categories = res.data;
						this.currentCategoryIndex = this.categories[0].category_id;
					}
					
				})
			},
			
			
			switchCategory(index) {
				this.currentCategoryIndex = index;
				this.onRefresh()
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
			  if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
			  this.triggered = true;
			},
			 // 自定义下拉刷新被复位
			onRestore() {
			  this.triggered = false; // 需要重置
			},
			// 自定义下拉刷新被中止
			onAbort() {
			  
			},
		    onRefresh() {
				this.list = [];
				this.page = 1;
				if (this.scrollTop === 0) {
					if (this._freshing) return;
					this._freshing = true;
					this.$request({
						url:'?c=Goods&a=goodsList',
						type:'post',
						data:{
							category_id:this.currentCategoryIndex,
							page:this.page,
							limit: 10
						}
					}).then(res =>{
						this.triggered = false;
					    this._freshing = false;
						this.status = 'loadmore';
						if (res.data && res.data.length > 0) {
							this.list = [...this.list, ...res.data];
							this.page += 1;
							if (res.data.length < 10) {
								this.status = 'nomore';
							}
						} else {
							this.status = 'nomore';
						}
					});
				}
		    },
			handleScroll(e){
			    this.goodsList();
			},
			goodsList(){
				console.log(this.currentCategoryIndex);
				if(!this.isLoading || this.status == 'nomore'){
					this.isLoading = true; 
					this.$request({
						url:'?c=Goods&a=goodsList',
						type:'post',
						data:{
							category_id:this.currentCategoryIndex,
							page:this.page,
							limit: 10
						}
					}).then(res =>{
						// uni.stopPullDownRefresh();
						this.isLoading = false;
						this.status = 'loadmore';
						if (res.data && res.data.length > 0) {
							this.list = [...this.list, ...res.data];
							this.page += 1;
							if (res.data.length < 10) {
								this.status = 'nomore';
							}
						} else {
							this.status = 'nomore';
						}
					});	
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	background-color: #fff;
}
.top-bar{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff; /* 设置背景颜色 */
	z-index: 10; /* 确保它在其他内容之上 */
}
.container{
	display: flex;
	height: 100vh;
	overflow: hidden;
	// padding-top: 180rpx;
	padding-bottom: 40rpx;
}
/* 左侧分类样式 */
.category-left {
	width: 25%;
	background-color: #f8f8f8;
	height: 100%;
	overflow-y: auto;
}
.category-item {
	padding: 25rpx 10rpx;
	text-align: center;
	font-size: 28rpx;
	border-bottom: 1rpx solid #eee;
	transition: all 0.3s;
}

.category-item.active {
	background-color: #fff;
	color: #e43130;
	font-weight: bold;
	position: relative;
}

.category-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 6rpx;
	background-color: #e43130;
}
 /* 右侧商品样式 */
.category-right {
	flex: 1;
	height: 100%;
	overflow-y: auto;
	padding-left: 10rpx;
	padding-right: 20rpx;
	padding-top: 15rpx;
	padding-bottom: 15rpx;
	background-color: #fff;
}
.goods-list{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 15rpx;
}
.card_img {
	height: 160rpx;
	width: 160rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
}
.goods-name{
	font-size: 30rpx;
}
.goods-price{
	color: #e43130;
	font-size: 28rpx;
	font-weight: bold;
	margin-top: 10rpx;
}
.org-price{
	font-size: 22rpx;
	color: #999999;
	text-decoration-line: line-through;
}
</style>
